<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../layui/jquery-3.2.1.min.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="js/saleStatistics.js"></script>
    <link href="../layui/css/layui.css" rel="stylesheet">
    <link href="css/saleStatistics.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>
</head>
<body>
    <div class="layui-container">
        <h1>销售统计</h1><hr>
        <div id="oneDiv">
            <table class="layui-table">
                <thead>
                <tr><th>厂商</th><th>类别</th><th>销售数量</th></tr>
                </thead>
                <tbody id="vendorDate"></tbody>
            </table>
            <div id="cutPageDiv"></div>
        </div>
        <div class="layui-col-md4">
            <fieldset style="width: 250px;height: 180px">
                <legend>查询销售统计信息</legend>
                <form id="findForm">
                    <div>
                        厂   商  <input type="text" name="factory">
                    </div>
                    <hr>
                    <div>
                        起始日期 <input type="date" name="startDate">
                    </div>
                    <hr>
                    <div>
                        结束日期 <input type="date" name="endDate">
                    </div>
                    <hr>
                </form>
                <a href="javascript:findByItem(1)" class="layui-btn layui-btn-sm layui-btn-normal" style="text-align: center"><i class="layui-icon layui-icon-search"></i>查询</a>
            </fieldset>
            <span id="main" class="layui-col-md8" style="width: 600px;height: 300px"></span>
            <script type="text/javascript">
                var myChart = echarts.init(document.getElementById('main'));
                var option = {
                    backgroundColor: '#2c343c',

                    title: {
                        text: 'Customized Pie',
                        left: 'center',
                        top: 20,
                        textStyle: {
                            color: '#ccc'
                        }
                    },

                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },

                    visualMap: {
                        show: false,
                        min: 80,
                        max: 600,
                        inRange: {
                            colorLightness: [0, 1]
                        }
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '50%'],
                            data: [
                                {value: 335, name: '电脑产品'},
                                {value: 310, name: '办公耗材'},
                                {value: 274, name: '打印扫描设备'},
                                {value: 235, name: '安防产品'},
                                {value: 400, name: '其他'}
                            ].sort(function (a, b) { return a.value - b.value; }),
                            roseType: 'radius',
                            label: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            },
                            labelLine: {
                                lineStyle: {
                                    color: 'rgba(255, 255, 255, 0.3)'
                                },
                                smooth: 0.2,
                                length: 10,
                                length2: 20
                            },
                            itemStyle: {
                                color: '#c23531',
                                shadowBlur: 200,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            },

                            animationType: 'scale',
                            animationEasing: 'elasticOut',
                            animationDelay: function (idx) {
                                return Math.random() * 200;
                            }
                        }
                    ]
                }
                myChart.setOption(option);
            </script>
        </div>

    </div>
</body>
</html>